<template>
<div>
   <div class="rank">
    <normal-list :data="topList"/>
    <global-list :data="list"/>
  </div>
  <transition enter-active-class="fly-in" leave-active-class="fly-out">
    <router-view/>
  </transition>
</div>
 
</template>

<script>
import NormalList from "@/components/rank/normal-list.vue";
import GlobalList from "@/components/rank/global-list.vue";
import { mapState } from "vuex";
export default {
  name: "Rank",
  data(){
    return{
      needLoading:true  //需要loading动画
    }
  },
  components: { NormalList, GlobalList },
  computed: {
    ...mapState({
      topList:(state) => state.rank.topList,
      list: (state) => state.rank.list,
      loading:state=>state.rank.loading
    }),
  },
  created() {
    this.$store.dispatch("rank/getRankData");
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  overflow: hidden;

  ul {
    width: max-content;
    display: flex;
    flex-wrap: nowrap;

    li {
    }
  }
}
</style>
